<template>
  <el-dialog :title="title" :visible.sync="visible" width="700px" :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
      <el-form-item label="课目名称：" prop="subjectName">
        <el-input v-model.trim="ruleForm.subjectName" placeholder="请输入" clearable class="input-w300" maxlength="100" :disabled="editType === 'detail'"></el-input>
      </el-form-item>
      <!-- <el-form-item label="权重：" prop="weight" v-if="(editType === 'detail' && ruleForm.weight) || editType !== 'detail'">
        <el-input v-model.trim="ruleForm.weight" type="text" placeholder="请输入数字（例：30代表30%,默认100%）" clearable class="input-w300" :disabled="editType === 'detail'" maxlength="3">
          <template slot="append">%</template>
        </el-input>
      </el-form-item> -->
      <el-form-item label="教员：" prop="subjectTeacherId">
        <el-select v-model="ruleForm.subjectTeacherId" placeholder="请选择" clearable filterable class="input-w300" :disabled="editType === 'detail'">
          <el-option v-for="item in userList" :key="item.id" :label="item.personnelName" :value="item.id">
            {{ item.personnelName }}{{ item.unitFullName ? '-' + item.unitFullName : '' }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起止时间：" prop="createTime">
        <el-date-picker v-model="ruleForm.createTime" class="input-w300" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :disabled="editType === 'detail'" type="daterange" clearable></el-date-picker>
      </el-form-item>
      <el-form-item label="简介：" prop="subjectDesc" v-if="(editType === 'detail' && ruleForm.subjectDesc) || editType !== 'detail'">
        <el-input v-model.trim="ruleForm.subjectDesc" type="textarea" placeholder="请输入" clearable class="input-w300" :disabled="editType === 'detail'" maxlength="200" show-word-limit></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox-group v-model="ruleForm.checkList" :disabled="editType === 'detail'">
          <div v-if="(editType === 'detail' && ruleForm.cj) || editType !== 'detail'">
            <el-checkbox label="cj">成绩文字显示：</el-checkbox>
            <el-input v-model.trim="ruleForm.cj" size="mini" placeholder="成绩" clearable class="input-w150 ml8" maxlength="100" :disabled="editType === 'detail'"></el-input>
          </div>
          <div v-if="(editType === 'detail' && ruleForm.df) || editType !== 'detail'" class="flex">
            <el-checkbox label="df">得分文字显示：</el-checkbox>
            <el-input v-model.trim="ruleForm.df" size="mini" placeholder="得分" clearable class="input-w150 ml8" maxlength="100" :disabled="editType === 'detail'"></el-input>

            <div class="ml12 flex">
              <el-input v-model.trim="ruleForm.weight" type="text" size="mini" placeholder="权重（例：30代表30%,默认100%）" clearable class="input-w150" :disabled="editType === 'detail'" maxlength="3">
                <template slot="append">%</template>
              </el-input>
            </div>

          </div>
          <div v-if="(editType === 'detail' && ruleForm.df1) || editType !== 'detail'"  class="flex">
            <el-checkbox label="df1">得分1文字显示：</el-checkbox>
            <el-input v-model.trim="ruleForm.df1" size="mini" placeholder="得分" clearable class="input-w150 ml8" maxlength="100" :disabled="editType === 'detail'"></el-input>
            <div class="ml12 flex">
              <el-input v-model.trim="ruleForm.weight1" type="text" size="mini" placeholder="权重（例：30代表30%,默认100%）" clearable class="input-w150" :disabled="editType === 'detail'" maxlength="3">
                <template slot="append">%</template>
              </el-input>
            </div>
          </div>
          <div v-if="(editType === 'detail' && ruleForm.df2) || editType !== 'detail'"  class="flex">
            <el-checkbox label="df2">得分2文字显示：</el-checkbox>
            <el-input v-model.trim="ruleForm.df2" size="mini" placeholder="得分" clearable class="input-w150 ml8" maxlength="100" :disabled="editType === 'detail'"></el-input>
            <div class="ml12 flex">
              <el-input v-model.trim="ruleForm.weight2" type="text" size="mini" placeholder="权重（例：30代表30%,默认100%）" clearable class="input-w150" :disabled="editType === 'detail'" maxlength="3">
                <template slot="append">%</template>
              </el-input>
            </div>
          </div>
          <div v-if="(editType === 'detail' && ruleForm.pd) || editType !== 'detail'">
            <el-checkbox label="pd">评定文字显示：</el-checkbox>
            <el-input v-model.trim="ruleForm.pd" size="mini" placeholder="评定" clearable class="input-w150 ml8" maxlength="100" :disabled="editType === 'detail'"></el-input>
          </div>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="editType !== 'detail'">
      <el-button type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addTrainingSubject, updateTrainingSubject, queryTrainingSubjectDetail } from "@/api/subject";
import { personnelList } from "@/api/org";

export default {
  components: {},
  dicts: [],
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    title: {
      default: '',
      type: String
    },
    editType: {
      default: 'add',
      type: String
    },
    editData: {
      default: {},
      type: Object
    },
    projectId: {
      default: '',
      type: String
    }
  },
  data () {
    return {
      userList: this.$store.state.user.userList,
      ruleForm: {
        endTime: "",
        startTime: "",
        subjectDesc: "",
        weight: '100',
        weight1: '100',
        weight2: '100',
        subjectName: "",
        createTime: [],
        checkList: ['df'],
        cj: '',
        df: '',
        df1: '',
        df2: '',
        pd: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入课目名称', trigger: 'blur' },
        ],
        subjectTeacherId: [
          { required: true, message: '请选择教员', trigger: 'change' },
        ],
        createTime: [
          { required: true, message: '请选择时间', trigger: 'change' },
        ],
      }
    };
  },
  watch: {
    visible (val) {
      if (val) {
        if (this.editType === 'edit' || this.editType === 'detail') {
          this.getDetail(this.editData.id)
        }
      } else {
        this.ruleForm = {
          endTime: "",
          startTime: "",
          weight: '100',
          weight1: '100',
          weight2: '100',
          subjectDesc: "",
          subjectName: "",
          createTime: [],
          checkList: ['df'],
          cj: '',
          df: '',
          df1: '',
          df2: '',
          pd: ''
        }
        this.resetForm('ruleForm')
      }
    }
  },
  methods: {
    // 查询详情
    async getDetail (id) {
      const res = await queryTrainingSubjectDetail(id)
      if (res.code === 200) {
        this.ruleForm = JSON.parse(JSON.stringify(res.data))
        this.ruleForm.createTime = [res.data.startTime, res.data.endTime]

        if (this.ruleForm.configInfo) {
          let configInfo = JSON.parse(this.ruleForm.configInfo)
          let tmpList = Object.keys(configInfo)
          this.$set(this.ruleForm, 'checkList', tmpList)
          tmpList.map(item => {
            this.$set(this.ruleForm, item, configInfo[item].label)
          })
        }
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 确定
    handleConfirm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = {
            ...this.ruleForm,
            configInfo: ''
          }
          if (this.ruleForm.createTime && this.ruleForm.createTime.length > 0) {
            params.startTime = this.ruleForm.createTime[0]
            params.endTime = this.ruleForm.createTime[1]
          }
          params.projectId = this.projectId

          let configInfo = {

          }
          this.ruleForm.checkList.map(item => {
            configInfo[item] = {
              label: '',
              value: ''
            }
            switch (item) {
              case 'cj':
                configInfo[item].label = this.ruleForm[item] ? this.ruleForm[item] : '成绩'
                break;
              case 'df':
                configInfo[item].label = this.ruleForm[item] ? this.ruleForm[item] : '得分'
                break;
              case 'df1':
                configInfo[item].label = this.ruleForm[item] ? this.ruleForm[item] : '得分'
                break;
              case 'df2':
                configInfo[item].label = this.ruleForm[item] ? this.ruleForm[item] : '得分'
                break;
              case 'pd':
                configInfo[item].label = this.ruleForm[item] ? this.ruleForm[item] : '评定'
                break;
            }
          })
          params.configInfo = JSON.stringify(configInfo)

          if (!params.weight) {
            params.weight = '100'
          }
          if (!params.weight1) {
            params.weight1 = '100'
          }
          if (!params.weight2) {
            params.weight2 = '100'
          }

          const res = await (this.ruleForm.id ? updateTrainingSubject(params) : addTrainingSubject(params))
          if (res.code === 200) {
            this.$message.success('保存成功');
            this.handleClose()
          }
        }
      });
    },
    // 取消
    handleCancel () {
      this.$emit('update:visible', false)
    },
    // 关闭
    handleClose () {
      this.$emit('update:visible', false)
      this.$emit('close')
    }
  }
};
</script>
<style lang='scss' scoped></style>
